<template>
	<view>
		<cu-custom :bgColor="globalData.bgColor" :isBack="true"><template #content><text class="text-darkgrey">{{$t('coupon.counponinfo-detail.qxkv1l')}}</text></template></cu-custom>
		<view >
			<view class="cu-card case">
				<view class="padding bg-white solid-top">
					<view >
						<view class="flex justify-between">
							<view class="padding-bottom-sm">
								<text class="text-darkgrey text-df cuIcon-titles">{{$t('coupon.counponinfo-detail.93pjd7')}}{{data.shopId}}</text>
							</view>
							<view class="text-xs cu-tag light round" :class="data.enable==1?'bg-blue':'bg-red'">{{data.enable==1?$t('bargain.bargaininfo.wq15ys'):$t('bargain.bargaininfo.unk1e2')}}</view>
						</view>
						<view class="text-purple-grey text-sm">{{$t('coupon.counponinfo-detail.srhw7c')}}{{data.name}}</view>
						<view class="text-purple-grey text-sm">{{$t('bargain.bargaininfo.s7dn6e')}}{{data.sort}}</view>
						<view class="text-purple-grey text-sm">{{$t('coupon.counponinfo-detail.m91u14')}}{{data.stock}}</view>
						<view class="text-purple-grey text-sm">{{$t('coupon.counponinfo-detail.o7ddt5')}}{{data.premiseAmount}}</view>
						<view class="text-purple-grey text-sm">{{$t('coupon.counponinfo-detail.ccmgvj')}}{{data.type==1?$t('coupon.counponinfo-detail.b5m568'):data.type==2?$t('coupon.counponinfo-detail.f69p18'):''}}</view>
						<view class="text-purple-grey text-sm">{{$t('coupon.counponinfo-detail.0wn4qd')}}{{data.reduceAmount}}</view>
						<view class="text-purple-grey text-sm">{{$t('coupon.counponinfo-detail.576irs')}}{{data.discount}}</view>
						<view class="text-purple-grey text-sm">{{$t('coupon.counponinfo-detail.fy8x70')}}{{data.expireType==1?$t('coupon.counponinfo-detail.3tw33m'):data.expireType==2?$t('coupon.counponinfo-detail.f81yf4'):''}}</view>
						<view class="text-purple-grey text-sm">{{$t('coupon.counponinfo-detail.7hgd95')}}{{data.validDays}}</view>
						<view class="text-purple-grey text-sm" v-if="data.validBeginTime">{{$t('bargain.bargaininfo.to5s93')}}{{data.validBeginTime}}{{' - '}}{{data.validEndTime}}</view>
						<view class="text-purple-grey text-sm">{{$t('coupon.counponinfo-detail.366m3c')}}{{data.suitType==1?$t('home.shop-home.h24drv'):data.suitType==2?$t('coupon.counponinfo-detail.gcj11d'):''}}</view>
						<!--                            <view class="text-grey text-sm">指定商品：{{data.listGoodsSpu}}</view>-->
						<view class="text-purple-grey text-sm text-right">{{data.createTime}}</view>
					</view>

					<view v-if="globalData.permissions['mall:couponinfo:edit']" class="margin-top-sm flex justify-end">
						<button  @click="changeEnable" class="cu-btn round button-bg shadow-blur margin-right-sm"  :class="data.enable==1?'bg-red':'bg-green'">{{data.enable==1?$t('bargain.bargaininfo.l661js'):$t('bargain.bargaininfo.bw8c4r')}}</button>
					</view>
				</view>
			</view>
			<view class="cu-list goods-list margin-top-xs" v-if="data.listGoodsSpu&&data.listGoodsSpu.length>0">
				<view >
					<view class="bg-white padding">
						<text class="text-darkgrey margin-right-xs cuIcon-titles"></text>{{$t('coupon.counponinfo-detail.cj5mc5')}}</view>
				</view>
				<view class="cu-item radius bg-white margin-bottom-xs padding-left padding-right padding-bottom"  v-for="data in data.listGoodsSpu" :key="data.id">
					<view class="flex justify-between">
						<view class="  padding-bottom-sm">
							<text class="text-darkgrey margin-right-xs cuIcon-shopfill margin-left-xs"></text>{{$t('coupon.counponinfo-detail.2s4472')}}{{data.spuCode}}
						</view>
						<view class="text-xs cu-tag light round" :class="data.shelf==1?'bg-green':'bg-red'">{{data.shelf==1?$t('coupon.counponinfo-detail.n703z9'):$t('coupon.counponinfo-detail.39j6cc')}}</view>
					</view>
					<view class="cu-list menu-avatar flex justify-between  padding-bottom ">
						<view class="cu-avatar img-box" :style="{'background-image':data.picUrls?'url('+data.picUrls[0]+')':''}"></view>
						<view class="content flex-sub padding-left  text-sm">
							<view class="text-darkgrey  text-to-long" >{{data.name}}</view>
							<view class="text-purple-grey flex justify-between margin-top-xs">{{$t('coupon.counponinfo-detail.63636w')}}{{data.saleNum}}
							</view>
							<view class=" margin-top-xs">
								<text class="text-red text-price text-xl text-bold">{{data.priceDown}}</text>
								<text class="text-red text-xl text-bold" v-show="data.priceUp&&data.priceDown!=data.priceUp"> {{' - '}} <text class="text-red text-price text-xl text-bold"> {{data.priceUp}}</text></text>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>

	
	import {getPage, getObj, addObj, putObj, delObj} from '@/api/mall/couponinfo'

	export default {
		onLoad(e){
			if(e){
				this.id = e.id;
				this.getData();
			}
		},
		data() {
			return {
                globalData: getApp().globalData,
				CustomBar: this.CustomBar,
				id: null,
				data: {},
			}
		},
		methods: {
			changeEnable(row){
				let content = this.$t('bargain.bargaininfo.w3g127');
				let enable = 1;
				if(this.data.enable==1){
					enable = 0;
					content = this.$t('bargain.bargaininfo.9di20a');
				}
				let that = this;
				uni.showModal({
					title: this.$t('bargain.bargaininfo.b8740a'),
					content: content,
					success: (res) => {
						if (res.confirm) {
							putObj({
								id: that.id,
								enable: enable
							}).then(data => {
								uni.showToast({title:this.$t('bargain.bargaininfo.f46253')})
								that.getData()
							});
						} else if (res.cancel) {}
					}
				});

			},
			getData(){
				getObj(this.id).then(response=>{
				    if(response.data){
				        this.data = response.data;
				    }
				});
			},
		}
	}
</script>

<style>
	.img-box{
		width: 200rpx !important;
		height: 200rpx !important;
	}

	.button-bg{
		padding: 20rpx 40rpx 20rpx 40rpx;
	}
</style>
